import Konva from 'konva';
import {ref} from "vue";
import {v4 as uuidv4} from 'uuid'

// 生成舞台
var stage = null;

// 生成初始层
var initLayer = new Konva.Layer({
    id:'initLayer'
});
// 生成游戏层
var gameLayer = new Konva.Layer({
    id:'gameLayer'
});
// 蛇的位置
var snakeList = [];
// 蛇的组
var snakeGroup = new Konva.Group();

//初始化页面
const init =(id,width,height)=>{
    // 生成舞台
    stage = new Konva.Stage({
        id:'stageId',
        container:id,
        width:width,
        height:height,
    });
    drawInitLayer();


};
// 获取 stage 状态
const getStageState= ()=> {
    return {
        width: stage.width(),
        height: stage.height(),
        scale: stage.scaleX(),
        x: stage.x(),
        y: stage.y()
    }
};

// 生成初始层
const drawInitLayer = ()=>{


    // 定义层 包含 标题 按钮
    var group = new Konva.Group({
        x: getStageState().width / 2,
        y: getStageState().height / 2,
        width:250,
        height:500,
        offsetX: 250 / 2,
        offsetY: 500 / 2
    });

    //标题定义
    var titleText = new Konva.Text({
        x: group.width() / 2,
        y: 20,
        text: '贪 吃 蛇',
        fontSize: 30,
        fontFamily: 'Calibri',
        fill: '#FFFFFF'
    });
    titleText.offsetX(titleText.width() / 2);

    // 生成开始按钮
    const startButton = drawButton('开 始');
    // 将生成的按钮 重新设定位置
    startButton.x(group.width() / 2);
    startButton.y(100);
    startButton.offsetX(startButton.width() / 2);
    // 生成按钮的click方法
    startButton.on('click',(e)=>{
        onStartButton(e)
    });

    // 生成结束按钮
    const endButton = drawButton('结 束');
    // 将生成的按钮 重新设定位置
    endButton.x(group.width() / 2);
    endButton.y(150);
    endButton.offsetX(endButton.width() / 2);
    // 生成按钮的click方法
    endButton.on('click',(e)=>{
        onEndButton(e)
    });

    group.add(titleText);
    group.add(startButton);
    group.add(endButton);
    initLayer.add(group);
    stage.add(initLayer)
};

// 开始按钮点击方法
const onStartButton = (e)=>{
    console.log(e)

    drawGameLayer();


};
// 结束按钮点击方法
const onEndButton = (e)=>{
    console.log(e)
};

// 生成游戏层
const drawGameLayer = ()=>{
    // 将初始化层去除  新增游戏层
    initLayer.hide();
    stage.add(gameLayer);
    drawSnake();
    snakeMove();



};

// 生成食物位置 随机生成食物 需要避开蛇的位置
const drawFood = ()=>{
    const x = Math.floor(Math.random() * 500);
    const y = Math.floor(Math.random() * 800);

    console.log(x +',' + y)

    var rect1 = new Konva.Rect({
        x: x,
        y: y,
        width: 10,
        height: 10,
        fill: '#ff0628',
    });
    gameLayer.add(rect1)
};

// 绘制蛇
const drawSnake = ()=>{
    snakeGroup.destroy();
    // 初始化时 生成蛇的位置
    if(snakeList.length === 0){
        const x = Math.floor(Math.random() * 500);
        const y = Math.floor(Math.random() * 800);
        snakeList = [
            {x:x,y:y},
            {x:x,y:y+10},
            {x:x,y:y+20},
        ];
        drawFood();
    };

    console.log(snakeList)

    snakeList.forEach((item)=>{
        var rect = new Konva.Rect({
            x: item.x,
            y: item.y,
            width: 10,
            height: 10,
            fill: '#63ff3e',
        });
        snakeGroup.add(rect)
    });

    gameLayer.add(snakeGroup);
};

// 蛇的移动事件
const snakeMove = ()=>{
    //给 stage container 设置 tabIndex 属性使它可以被 focus, 然后监听它上面的事件
    var container = stage.container();
    container.tabIndex = 1;
    container.focus();
    const DELTA = 10;
    container.addEventListener('keydown', function(e) {
        if (e.keyCode === 37) {
            console.log('左')
            // snakeList.forEach((item,i)=>{
            //     if(i === 0){
            //         item.x -= DELTA;
            //     }else {
            //         item.y -= DELTA
            //     }
            // });
            // // gameLayer.destroy();
            // drawSnake()
            // snakeGroup.x(snakeGroup.x() - DELTA)
        } else if (e.keyCode === 38) {
            console.log('上')
            snakeGroup.y(snakeGroup.y() - DELTA);
        } else if (e.keyCode === 39) {
            console.log('右')
            snakeGroup.x(snakeGroup.x() + DELTA);
        } else if (e.keyCode === 40) {
            console.log('下')
            snakeGroup.y(snakeGroup.y() + DELTA);
        } else {
            return;
        }
        e.preventDefault();

    });
};


/**
 * 生成文字按钮方法  将按钮看出 由矩形和文字组成的 层
 * 通过按钮文字的长度自适应按钮宽度
 * 默认高度为 32px
 * 默认按钮背景色为 #c4ffb5
 * 默认文字背景色为 #000000
 * @param text 按钮文字
 * @returns {Konva.Group}
 */
const drawButton = (text)=>{
    const width = text.length * 20;
    const height = 32;

    var buttonGroup = new Konva.Group({
        width:width,
        height:height
    });

    // 定义按钮
    var startButton = new Konva.Rect({
        x:0,
        y:0,
        width: width,
        height: height,
        fill: '#c4ffb5',
        shadowBlur: 10,
        cornerRadius: 10
    });

    // 按钮文字
    var titleText = new Konva.Text({
        x: startButton.width() / 2,
        y: startButton.height() / 2,
        text: text,
        fontSize: 15,
        fontFamily: 'Calibri',
        fill: '#000000'
    });
    titleText.offsetX(titleText.width() / 2);
    titleText.offsetY(titleText.height() / 2);

    buttonGroup.add(startButton);
    buttonGroup.add(titleText);

    return buttonGroup
};



export default {
    init
}